import { useState } from "react";
import NavCard from "./NavCard";

const SideNav: React.FC = () => {
  const [open, setOpen] = useState(false);
  return (
    <div className="fixed z-[2000] top-0 right-0 h-screen">
      <div
        className={`absolute right-2 md:right-0 top-[95%] md:top-1/2 flex justify-center items-center rounded-full shadow-[0_0_16px_rgba(255,255,255,0.1)] bg-black/60 w-[54px] h-[54px] -translate-x-[10px] -translate-y-1/2
          hover:bg-black/60 cursor-pointer transition duration-300
          ${open ? 'opacity-0 pointer-events-none' : 'opacity-100 pointer-events-auto'}
        `}
        onClick={() => setOpen(!open)}
      >
        <svg className="w-[60%] h-[60%]" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M170.666667 213.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" /><path fill="#ffffff" d="M170.666667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" /><path fill="#ffffff" d="M170.666667 810.666667m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" /><path fill="#ffffff" d="M896 778.666667H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM362.666667 245.333333h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32zM896 480H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" /></svg>
      </div>
      <NavCard open={open} handleClose={() => setOpen(false)} />
    </div>
  )
}

export default SideNav
